<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../EaselJS/lib/easeljs-0.8.2.min.js"></script>
    <script src="../TweenJS/lib/tweenjs-0.6.2.min.js"></script>
</head>
<body>
<canvas id="myCanvas" width="350" height="420"></canvas>
<script type="text/javascript">
    var canvas = document.getElementById('myCanvas'),
        stage = new createjs.Stage(canvas);

    var stageWidth = canvas.width;
    var stageHeight = canvas.height;

    var characterWidth = 75;
    var characterHeight = 96;

    var spritesheet;
    var charactor;
    window.onload = function(){
        spritesheet = new createjs.SpriteSheet({
            'images': ['http://cdn.gbtags.com/gblibraryassets/libid108/charactor.png'],
            'frames': {"height": 96, "count": 10, "width": 75}
        });

        charactor  = new createjs.Sprite(spritesheet);

        charactor.x = (stageWidth - characterWidth)/2;
        charactor.y = (stageHeight - characterHeight)/2;

        stage.addChild(charactor);

        charactor.play();

        /*
         *  以下代码生成了tween动画人物相关效果
         */

        // 生成上下移动人物效果（一次性）
        createjs.Tween.get(charactor, {loop:false})
            .to({y:150}, 500, createjs.Ease.quadInOut)
            .to({y:50}, 500, createjs.Ease.quadInOut);

        // 生成人物左右移动效果（无限循环）
        createjs.Tween.get(charactor, {loop:true})
            .wait(3000)
            .call(charactor.gotoAndStop, [5], charactor)
            .wait(300)
            .to({x:450}, 1200, createjs.Ease.backInOut)
            .call(charactor.gotoAndStop, [0], charactor)
            .wait(2000)
            .call(charactor.gotoAndStop, [5], charactor)
            .wait(300)
            .to({x:(stageWidth - characterWidth)/2}, 500, createjs.Ease.backInOut)
            .call(charactor.gotoAndStop, [0], charactor);

        createjs.Ticker.setFPS(35);
        createjs.Ticker.addEventListener("tick", tick);
        function tick(){
            stage.update();
        }
    };
</script>
</body>
</html>